<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
</head>
<body>
<h1>GET请求地址参数</h1>
<form>
    账号:<input name="user"><br>
    密码:<input name="pwd" type="password"><br>
    爱好:<input name="like" type="checkbox" value="和平">和平
        <input name="like" type="checkbox" value="踢球">踢球
        <input name="like" type="checkbox" value="唱歌">唱歌<br>
    <button>提交</button>
</form>

<h1>POST请求BODY参数</h1>
<form method="post" action="param.html?a=100&b=abc">
    账号:<input name="user"><br>
    密码:<input name="pwd" type="password"><br>
    爱好:<input name="like" type="checkbox" value="和平">和平
    <input name="like" type="checkbox" value="踢球">踢球
    <input name="like" type="checkbox" value="唱歌">唱歌<br>
    <button>提交</button>
</form>

<h1>POST请求 JSON 格式参数</h1>
<button onclick="submit()">提交</button>
<script>
    function submit(){
        // 定义复杂的数据结构  json 对象
        // name=张三&father.name="张三丰"  ...
        let person = {
            name : "张三",
            gender : "男",
            birthday : new Date(),
            father: {
                name : "张三丰",
                gender : "男",
                birthday : new Date(),
            },
            mather: {
                name : "李四",
                gender : "女",
                birthday : new Date(),
            },
            friends : [{name : "王五", gender : "男"},
                       {name : "赵六", gender : "男"}]
        }
        axios.post("param.html", person).then(res=>{
            alert("数据提交成功!");
        })
    }
</script>

<h1>文件上传格式参数</h1>
<form method="post" action="param.html?a=100&b=abc" enctype="multipart/form-data">
    账号:<input name="user"><br>
    密码:<input name="pwd" type="password"><br>
    爱好:<input name="like" type="checkbox" value="和平">和平
    <input name="like" type="checkbox" value="踢球">踢球
    <input name="like" type="checkbox" value="唱歌">唱歌<br>
    <input name="uploadFile" type="file" id="myfile"><br>
    <button type="submit">提交</button>
<!--    button 普通按钮-->
    <button type="button" onclick="upload()">AJAX提交</button>
</form>
<script>
    function upload(){
        var fd = new FormData();
        fd.append("user","123123");
        fd.append("pwd","123123");
        fd.append("uploadFile", myfile.files[0]);
        axios.post("param.html", fd).then(res=>{
            alert("文件上传成功!");
        });
    }
</script>

</body>
</html>